<template>
	<view class="container">
		<view class="thelist_z">
			<view class="thelist" v-for="(val,key) in array" :key="key" :style="val['name'] == '详情地址'?'height: 120rpx;line-height: 120rpx;':''">
				<view class="thelist_left" v-if="val['name'] != '详情地址'">{{val.name}}</view>
				<view class="thelist_right" v-if="val['name'] == '详情地址'" style="border: 0;float: left;">
					<input type="text" v-model="val['value']" :placeholder="val['prompt']" style="text-align: left;height: 120rpx;line-height: 120rpx;" />
				</view>
				<view class="thelist_right" v-else-if="val['name'] != '选择地址'">
					<input type="text" v-model="val['value']" :placeholder="val['prompt']" />
				</view>
				<view class="thelist_right" v-else>
					<!-- <uni-data-picker :placeholder="placeholder" :popup-title="title" collection="opendb-city-china" field="code as value, name as text,zip_code as codename" orderby="value asc" :step-searh="true" :self-field="code" parent-field="parent_code"
						@change="onchange" @nodeclick="onnodeclick">
					</uni-data-picker> -->
					<pickerAddress style="float: right;" @change="change">{{txt}}</pickerAddress>
				</view>
			</view>
		</view>
		<view class="save" @click="save">
			保存
		</view>
		<view v-if="id" class="save_dei" @click="delete_bankcard(id)">
			删除地址
		</view>
	</view>
</template>


<script>
	const util = require('../../utils/util.js');
	import tuiToast from "@/components/extend/toast/toast"
	import pickerAddress from "@/components/wangding-pickerAddress/wangding-pickerAddress"
	
	export default {
		components: {
			tuiToast,
			pickerAddress
		},
		data() {
			return {
				array: [
					{name:'联系人',value:'',prompt:'填写收件人姓名'},
					{name:'手机号码',value:'',prompt:'填写收件人手机号'},
					{name:'选择地址',value:'',prompt:'请选择省/市/区'},
					{name:'详情地址',value:'',prompt:'请填写详细收货地址'},
					// {name:'邮政编码',value:'',prompt:'邮政编码'},
				],
				picker_value:[],
				code: '',
				id: '',
				placeholder:'请选择地址',
				title: '请选择城市',
				state: '1',
				
				
				txt: '选择地址',
			}
		},
		onLoad: function(option){
			if(option.state == 2){
				this.state = '2';
				this.array['0']['value'] = wx.getStorageSync('shipping_params_edit').name;
				this.array['1']['value'] = wx.getStorageSync('shipping_params_edit').mobile;
				this.placeholder = wx.getStorageSync('shipping_params_edit').province +'/'+ wx.getStorageSync('shipping_params_edit').city +'/'+ wx.getStorageSync('shipping_params_edit').region;
				this.txt = wx.getStorageSync('shipping_params_edit').province +'/'+ wx.getStorageSync('shipping_params_edit').city +'/'+ wx.getStorageSync('shipping_params_edit').region;
				this.array['3']['value'] = wx.getStorageSync('shipping_params_edit').address;
				this.id = wx.getStorageSync('shipping_params_edit').id;
			}
		},
		methods: {
			change(data) {
				console.log(data);
				this.picker_value = data;
				this.txt = data.data.join('/');
				console.log(data.data.join('/'));
			},
			delete_bankcard: function(card_id){
				let that = this;
				wx.showModal({
					title: '确认要地址信息吗？',
					content: '地址信息删除后无法恢复，请谨慎操作',
					success(res) {
						if (res.confirm) {
							console.log('用户点确定了');
							that.tui.request('user/addressEditStatus', {
								id:card_id,
							}).then((res) => {
								if(res.code == '0000'){
									var bankcard = false;
									wx.setStorage({
									   key: 'cache_xaddress',
									   data: bankcard
									});
									
									wx.navigateBack({
									  delta: 1
									})
								}else{
									let params = {
										title: "删除失败",
										imgUrl: "/static/toast/fail-circle.png",
										icon: true
									};
									that.$refs.toast.show(params);
								}
							}).catch((err) => {
								that.reimburse = false;
								let params = {
									title: "服务器异常",
									imgUrl: "/static/toast/fail-circle.png",
									icon: true
								};
								that.$refs.toast.show(params);
							})
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			save: function(){
				var that = this;
				console.log(that.picker_value);
				if(!that.array['0']['value']){
					wx.showToast({
						title: '请填写联系人',
						icon: 'none',
						duration: 2000
					})
					return false;
				}else if(!that.array['1']['value']){
					wx.showToast({
						title: '请填写手机号',
						icon: 'none',
						duration: 2000
					})
					return false;
				}else if(!that.picker_value['data'] && this.id == ''){
					console.log('1111');
					wx.showToast({
						title: '请填写地区',
						icon: 'none',
						duration: 2000
					})
					return false;
				}else if(!that.array['3']['value']){
					wx.showToast({
						title: '请填写地区',
						icon: 'none',
						duration: 2000
					})
					return false;
				}
				
				if(that.id){
					if(that.picker_value['data']){
						var payParm = {
							name: that.array['0']['value'],
							mobile: that.array['1']['value'],
							province: that.picker_value['data']['0'],
							city: that.picker_value['data']['1'],
							region: that.picker_value['data']['2'],
							code: that.picker_value['countyCode'],
							address: that.array['3']['value'],
							id: this.id
						};
					}else{
						var payParm = {
							name: that.array['0']['value'],
							mobile: that.array['1']['value'],
							province: wx.getStorageSync('shipping_params_edit').province,
							city: wx.getStorageSync('shipping_params_edit').city,
							region: wx.getStorageSync('shipping_params_edit').region,
							code: wx.getStorageSync('shipping_params_edit').code,
							address: that.array['3']['value'],
							id: this.id
						};
					}
					
				}else{
					var payParm = {
						name: that.array['0']['value'],
						mobile: that.array['1']['value'],
						province: that.picker_value['data']['0'],
						city: that.picker_value['data']['1'],
						region: that.picker_value['data']['2'],
						code: that.picker_value['countyCode'],
						address: that.array['3']['value']
					};
				}
				
				console.log(payParm);
				that.tui.request('user/addressAddEdit',payParm).then((res) => {
					if(res.code == '0000'){
						// wx.setStorage({
						//    key: 'cache_xaddress',
						//    data: payParm
						// });
						
						wx.showToast({
							title: '成功',
							icon: 'none',
							duration: 2000
						})
						
						wx.navigateBack({
						  delta: 1
						})
						
					}else{
						wx.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
						return false;
					}
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					that.$refs.toast.show(params);
				})
			},
			onchange(e) {
				this.picker_value = e.detail.value;
				console.log(this.picker_value);
				// this.array['4']['value'] = this.picker_value['2']['codename'];
			},
			onnodeclick(node) {
				console.log('2',node);
			},
		}
	}
</script>

<style>
	.thelist_z{
		background: #FFF;
	}
	
	.thelist{
		padding: 20rpx;
		font-size: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 20rpx;
		padding-left: 0;
		border-bottom: .5px solid #e8e8e8;
		color: #222222;
	}
	
	.thelist_left{
		width: 20%;
		float: left;
	}
	
	.thelist_right{
		width: 80%;
		float: right;
		height: 80rpx;
		line-height: 80rpx;
	}
	
	.thelist_right input{
		line-height: 80rpx;
		height: 80rpx;
		font-size: 32rpx;
		text-align: right;
	}
	
	.save{
		width: 80%;
		height: 100rpx;
		background: #1193e3;
		color: #fff;
		line-height: 100rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 80rpx;
		border-radius: 10rpx;
		font-size: 34rpx;
	}
	
	.save_dei{
		width: 80%;
		height: 100rpx;
		/* background: #1193e3; */
		color: #1193e3;
		line-height: 100rpx;
		text-align: center;
		margin: 0 auto;
		border-radius: 10rpx;
		font-size: 34rpx;
	}
</style>
